<template>
	<view>
		<cu-custom slot="top" :isBack="true" :bgColor="'bg-'+ theme.themeColor">
			<block slot="backText">返回</block>
			<block slot="content">订单详情</block>
		</cu-custom>
		<view class="bg-white margin-xs  padding">
			<view class="text-red" v-if="orderInfo.statusDesc">
				{{orderInfo.statusDesc}}
			</view>
			<view v-if="orderInfo.status == '1'">
				请在30分钟内付款，超时订单自动取消
			</view>
		</view>
		<view class="bg-white margin-xs  padding flex">
			<view class="basis-xs  flex align-center justify-center text-xxl">
				<view class="cuIcon-location text-red"></view>
			</view>
			<view class="basis-xl" v-if="orderInfo.orderLogistics">
				<view class="content">
					<view class="text-bold">{{orderInfo.orderLogistics.detailAddress}}</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							{{orderInfo.orderLogistics.addresseeName}} {{orderInfo.orderLogistics.telephone}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white radius-xl margin-xs">
			<view v-for="(item,index) in orderInfo.orderItemList" class="flex">
				<view class="basis-xs margin-xs padding-sm radius">
					<view class="cu-avatar radius xl" :style="'background-image:url(' + item.picUrl + ')'">
					</view>
				</view>
				<view class="basis-xl margin-xs padding-sm radius">
					<view class="hx-overflow-2">
						{{item.spuName}}
					</view>
					<view v-if="item.specsInfo" class="text-gray">
						{{item.specsInfo}}
					</view>
					<view class="flex justify-between align-end padding-top-xs">
						<view class="text-bold text-df text-price" :class="'text-'+ theme.themeColor">
							{{item.paymentPrice}}
						</view>
						<view> x{{item.buyQuantity}}</view>
					</view>
					<view class="flex align-end justify-end padding-top-xs" v-if="orderInfo.payStatus == '1'">
						<navigator class="cu-btn sm text-gray" hover-class="none" v-if="item.status == '0'"
							:url="'/pages/order/order-refund/submit?orderItemId=' + item.id">申请售后</navigator>
						<navigator v-else class="cu-btn sm round " hover-class="none" :class="'bg-'+theme.matchColor"
							:url="'/pages/order/order-refund/index?orderItemId=' + item.id">{{item.statusDesc}}
						</navigator>
					</view>
				</view>
			</view>
			<view class="cu-bar" style="min-height: 80rpx;">
				<view class="action">
					<text class="cuIcon-title text-red"></text> 商品总价
				</view>
				<view class="action">
					<view class="text-black text-price">{{orderInfo.totalPrice}}</view>
				</view>
			</view>
			<view class="cu-bar" style="min-height: 80rpx;">
				<view class="action">
					<text class="cuIcon-title text-red"></text> 运费
				</view>
				<view class="action">
					<view class="text-black text-price">{{orderInfo.freightPrice}}</view>
				</view>
			</view>
			<view class="cu-bar" style="min-height: 80rpx;">
				<view class="action">
					<text class="cuIcon-title text-red"></text> 优惠金额
				</view>
				<view class="action">
					<text class="text-red padding-lr-xs">-</text>
					<view class="text-red text-price">{{orderInfo.couponPrice}}</view>
				</view>
			</view>
			<view class="cu-bar solid-bottom" style="min-height: 80rpx;">
				<view class="action">
					<text class="cuIcon-title text-red "></text> {{orderInfo.payStatus == '1'? '已付款' :'需付款'}}
				</view>
				<view class="action">
					<view class="text-red text-price text-bold text-xl">{{orderInfo.paymentPrice}}</view>
				</view>
			</view>
			<view class="cu-bar">
				<view class="action">
					订单编号
				</view>
				<view class="action">
					<view class="text-black">{{orderInfo.orderNo}}</view>
				</view>
			</view>
			<view class="cu-bar">
				<view class="action">
					创建时间
				</view>
				<view class="action">
					<view class="text-black">{{orderInfo.createTime}}</view>
				</view>
			</view>
			<view class="cu-bar" v-if="orderInfo.cancelTime">
				<view class="action">
					取消时间
				</view>
				<view class="action">
					<view class="text-black">{{orderInfo.cancelTime}}</view>
				</view>
			</view>
			<view class="cu-bar bg-white" style="min-height: 80rpx;" v-if="orderInfo.deliverTime">
				<view class="action">
					发货时间
				</view>
				<view class="action">
					<view class="text-black">{{orderInfo.deliverTime}}</view>
				</view>
			</view>
			<view class="cu-bar bg-white" style="min-height: 80rpx;" v-if="orderInfo.receiverTime">
				<view class="action">
					收货时间
				</view>
				<view class="action">
					<view class="text-black">{{orderInfo.receiverTime}}</view>
				</view>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar bg-white tabbar border foot justify-end">
			<order-operation :orderInfo="orderInfo" :isPay="isPay" @orderDel="orderDel($event,index)"
				@orderReceiver="orderReceiver($event,index)" @orderCancel="orderCancel($event,index)"></order-operation>
		</view>
	</view>
</template>

<script>
	import orderOperation from 'components/order-operation/index'
	import {
		getById
	} from '@/api/orderinfo.js';
	export default {
		components: {
			orderOperation
		},
		data() {
			return {
				theme: getApp().globalData.theme,
				orderInfo: {},
				timeData: {},
				isPay: false
			}
		},
		onLoad(option) {
			if (option.isPay) {
				this.isPay = option.isPay
			}
			getApp().initPage().then(res => {
				this.getOrderDetail(option.id)
			})
		},
		methods: {
			getOrderDetail(id) {
				getById(id).then(res => {
					this.orderInfo = res.data
				})
			},
			orderCancel(item, index) {
				this.getOrderDetail(item.id)
			},
			orderDel(item, index) {
				uni.navigateBack({
					delta: 1
				});
			},
			orderReceiver(item, index) {
				this.getOrderDetail(item.id)
			}
		}
	}
</script>

<style lang="scss">
</style>
